<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import { drawerOpened } from "@/state/drawer";
import { userInfo } from "@/state/user.js";
import "@material/web/icon/icon.js";
import NavigationDrawer from "./NavigationDrawer.vue";
import DrawerItem from "./DrawerItem.vue";

const router = useRouter();

const items = [
  {
    route: "overview",
    icon: "home",
    label: "概览"
  }, {
    route: "statistics",
    icon: "monitoring",
    label: "统计"
  }, {
    route: "region",
    icon: "globe",
    label: "区域"
  }, {
    route: "details",
    icon: "data_table",
    label: "详情"
  }, {
    route: "account",
    icon: "person",
    label: "帐号"
  }, {
    route: "devices",
    icon: "developer_board",
    label: "设备",
    requireAdmin: true
  }, {
    route: "settings",
    icon: "settings",
    label: "设置",
    requireAdmin: true
  }, {
    route: "about",
    icon: "help",
    label: "关于"
  }
];

if (import.meta.env.DEV) {
  items.push({
    route: "test",
    icon: "bug_report",
    label: "测试"
  });
}

const currentRouteName = computed(() => router.currentRoute.value.name);

</script>

<template>
  <div role="presentation">
    <NavigationDrawer class="nav-drawer" :class="{ hidden: userInfo == null }" :expanded="drawerOpened">
      <template v-for="item in items" :key="item.route">
        <DrawerItem v-if="!item.requireAdmin || userInfo?.isAdmin" :selected="item.route == currentRouteName"
          :route="item.route" :title="item.label" :expand="drawerOpened">
          <template #icon>
            <md-icon>{{ item.icon }}</md-icon>
          </template>
        </DrawerItem>
      </template>
    </NavigationDrawer>
  </div>
</template>

<style scoped>
.nav-drawer {
  padding: var(--navigation-drawer-padding);
  opacity: 1;
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-short2);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.nav-drawer.hidden {
  opacity: 0;
}
</style>
